﻿<script setup lang="ts" name="EditVideo">
import { FileApi } from '@/api/infra/file'
const { error, success } = useMessage()

const emit = defineEmits(['save'])
const videoRef: any = ref(null)
const props = defineProps({
  config: { type: Object }
})

const initInfo: any = ref({
  dialogVisible: false,
  info: null,
  list: [],
  isPreview: false,
  helpText: ''
})

// 显示弹窗
const showDialog = (v) => {
  if (videoRef.value) {
    videoRef.value.play()
  }
  initInfo.value.dialogVisible = true
  console.log(v, '当前视频')
  initInfo.value.info = v
  if (v.attachment_id) {
    initInfo.value.list = [v.attachment.url]
  }
  initInfo.value.helpText = helpText('image')
  console.log(initInfo.value.info)
}

// 子组件将方法暴露给父组件
defineExpose({ showDialog })

// 关闭弹窗
const closeDialog = () => {
  initInfo.value.dialogVisible = false
  videoRef.value.pause()
}

// 保存
const handleOk = () => {
  if (initInfo.value.info.title === '') {
    error('视频名称不能为空')
    return false
  }
  FileApi.update(initInfo.value.info).then((res: any) => {
    if (res.code === 200) {
      success('视频编辑成功！')
      emit('save')
      closeDialog()
    }
  })
}

// 提示文本组装
const helpText = (type) => {
  const helpTexts: string[] = []
  let typeText = ''
  if (type === 'image') {
    typeText = '图片文件'
  } else if (type === 'video') {
    typeText = '媒体文件'
  } else {
    typeText = '文档文件'
  }
  helpTexts.push('支持上传' + props.config?.accept[type] + '格式' + typeText)
  helpTexts.push('大小不超过' + props.config?.fileSize[type])
  return helpTexts.join('<br />')
}

// 删除封面图
const deleteCover = () => {
  initInfo.value.info.attachment = null
  initInfo.value.info.attachment_id = null
}

// 预览封面图
const previewCover = () => {
  initInfo.value.isPreview = true
}

// 关闭预览
const closePreview = () => {
  initInfo.value.isPreview = false
}

const ResourceChooseRef: any = ref(null)
// 调起选择资源弹窗，并传递选择资源的类型以及是否可多选资源
const uploadCover = () => {
  ResourceChooseRef.value.showDialog({
    type: 'image', // 资源选择弹窗可选资源类型：image|video|file
    multiple: false // 是否可多选
  })
}

// 选择资源弹窗确定后，返回已选择的资源
const confirmResourceChoose = (v) => {
  console.log(v, '确定选择')
  if (v.length === 1) {
    initInfo.value.info.attachment = v[0]
    initInfo.value.info.attachment_id = v[0].id
    initInfo.value.list = [v[0].url]
  }
}
</script>

<template>
  <ElDialog v-model="initInfo.dialogVisible" title="视频编辑" width="960px" align-center @close="closeDialog">
    <div class="video-edit-wrap">
      <div class="video-edit-left">
        <div class="video-edit-content">
          <div class="el-video">
            <video ref="videoRef" :src="initInfo.info.url" autoplay loop controls />
          </div>
        </div>
      </div>
      <div class="video-edit-right">
        <ElForm label-width="auto" label-position="top">
          <ElFormItem label="视频名称：">
            <ElInput v-model="initInfo.info.title" clearable maxlength="50" show-word-limit placeholder="" />
          </ElFormItem>
          <ElFormItem label="视频描述：">
            <ElInput v-model="initInfo.info.description" type="textarea" clearable maxlength="150" :autosize="false" resize="none" show-word-limit placeholder="" />
          </ElFormItem>
          <ElFormItem label="视频封面：">
            <div class="video-image">
              <div v-if="initInfo.info.attachment_id" class="image-preview">
                <div class="mask">
                  <SvgIcon icon="ri:eye-line" size="18" title="预览" @click="previewCover" />
                  <SvgIcon icon="ri:exchange-line" size="18" title="更换封面" @click="uploadCover" />
                  <SvgIcon icon="ri:delete-bin-5-line" size="18" title="删除" @click="deleteCover" />
                </div>
                <ElImage :src="initInfo.info.attachment.url" :alt="initInfo.info.attachment.alt" fit="fill" />
                <ElImageViewer v-if="initInfo.isPreview" :url-list="initInfo.list" :initial-index="0" :hide-on-click-modal="true" @close="closePreview" />
              </div>
              <div v-else class="upload-image" @click="uploadCover"><svg-icon icon="ep:plus" size="28" color="" /></div>
              <div class="video-tips">
                <p v-if="initInfo.info.imagewidth && initInfo.info.imageheight">
                  视频尺寸：{{ initInfo.info.imagewidth }}x{{
    initInfo.info.imageheight }}
                </p>
                <p v-if="initInfo.info.imagewidth && initInfo.info.imageheight">建议上传与视频相同尺寸的图片</p>
                <p v-html="initInfo.helpText" />
              </div>
            </div>
          </ElFormItem>
        </ElForm>
        <ResourceChoose ref="ResourceChooseRef" @save="confirmResourceChoose" />
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <ElButton @click="closeDialog">取消</ElButton>
        <ElButton type="primary" @click="handleOk">确定</ElButton>
      </span>
    </template>
  </ElDialog>
</template>

<style scoped lang="scss">
.video-edit-wrap {
  display: flex;
  flex-direction: row;

  .video-edit-left,
  .video-edit-right {
    height: 360px;
  }

  .video-edit-left {
    width: 50%;
  }

  .video-edit-right {
    width: 50%;
    padding-left: var(--el-space);

    .el-form {
      overflow: hidden;

      .el-form-item {
        :deep(.el-form-item__content) {
          .el-textarea {
            .el-textarea__inner {
              height: 88px;
            }
          }
        }
      }
    }
  }

  .video-edit-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 360px;
    overflow: hidden;
    background: #000;

    .el-video {
      max-width: 100%;
      max-height: 100%;
      overflow: hidden;

      video {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 360px;
        object-fit: fill;
      }
    }
  }

  .video-edit-group {
    display: flex;
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid var(--el-border-color-lighter);
    align-items: center;
    justify-content: space-around;
  }
}

.video-image {
  display: flex;
  flex: 1;
  padding: 6px;

  .image-preview {
    position: relative;
    display: flex;
    width: 126px;
    height: 126px;
    overflow: hidden;
    background-color: var(--el-fill-color-lighter);
    border: 1px solid var(--el-border-color-darker);
    border-radius: 6px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;

    &:hover {
      .mask {
        opacity: 1;
        visibility: visible;
      }
    }

    .mask {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10;
      display: flex;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s;
      align-items: center;
      justify-content: center;

      .el-icon {
        margin: 0 6px;
        font-size: 24px !important;
        color: #fff;
        cursor: pointer;
        transition: all 0.3s;

        &:hover {
          font-size: 32px !important;
        }
      }
    }

    .el-image {
      max-width: 124px;
      max-height: 124px;
    }
  }

  .upload-image {
    display: flex;
    width: 126px;
    height: 126px;
    cursor: pointer;
    background-color: var(--el-fill-color-lighter);
    border: 1px dashed var(--el-border-color-darker);
    border-radius: 6px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;

    &:hover {
      border-color: var(--el-color-primary);
    }
  }

  .video-tips {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding-left: 10px;

    p {
      font-size: 12px;
      line-height: 24px;
      color: var(--el-text-color-secondary);
    }
  }
}
</style>
